<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法4：v-model双向绑定</title>
    <script src="http://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1：v-model双向绑定</h1>
        <h3>我们可以用v-model指令在表单input,textarea,select等元素进行双向绑定
            它会根据控件的类型自动获取正确的方法来更新元素。v-model会忽略所有表单元素
            的value等初始值
        </h3>
        <h3>1.单行文本框</h3>
        姓名：<input type="text" v-model="singleText">尊敬的{{singleText}}用户你好！
        <h3>2.多行文本框</h3>
        介绍：<textarea name="" id="" v-model="multiText"></textarea>
        我输入的介绍是：{{multiText}}
        <h3>3.单选框</h3>
        <h4>单选框在实际中是不能单独使用的，一般要两个及以上，只要统一设置变量，就可以实现radiogroup的效果</h4>
        性别：<input type="radio" value="男神" v-model="radioValue">男神
            <input type="radio" value="女神" v-model="radioValue">女神
            <br>原来你是个{{radioValue}}啊！
        <h3>4.单个复选框：单个复选框通常用true和false进行选择</h3>
        <input type="checkbox" v-model="toggleValue">是否好孩子<br>
        {{toggleValue}}
        <h3>5.多个复选框：v-model接受数组型的变量</h3>
        你的爱好：
        <input type="checkbox" value="唱歌" v-model="checkValue">唱歌
        <input type="checkbox" value="跳舞" v-model="checkValue">跳舞
        <input type="checkbox" value="篮球" v-model="checkValue">篮球
        <input type="checkbox" value="足球" v-model="checkValue">足球
        <input type="checkbox" value="洗澡" v-model="checkValue">洗澡
        <br>你的爱好是：{{checkValue.join(',')}}
        <h3>6.单项下拉框</h3>
            <select name="" id="" v-model="singleSelect">
                <option value="Java">Java</option>
                <option value="Python">Python</option>
                <option value="vue">vue</option>
                <option value="C">C</option>
            </select>
            <br>
            我知道你最喜欢的课程是：{{singleSelect}}
        <h3>7.多项下拉框</h3>
            选哪些课程选修：<select name="" id="" multiple v-model="multiSelect">
                <option value="Java">Java</option>
                <option value="Python">Python</option>
                <option value="vue">vue</option>
                <option value="C">C</option>
                <option value="Web">Web</option>
            </select>
            <br>我挑选了这些课：{{multiSelect.join(',')}}
        <h1>课堂练习</h1>
        <br>用户名：<input type="text" v-model="singleText1"><br>
        <br>密码：<input type="password" v-model="singlePass1"><br>
        <br>确认密码：<input type="password" v-model="singlePass2"><br>
        <br>性别：<input type="radio" value="男神" v-model="radioValue1">男神
            <input type="radio" value="女神" v-model="radioValue1">女神<br>
        <br>籍贯：<select name="" id="" v-model="singleSelect1">
                <option value="杭州">杭州</option>
                <option value="宁波">宁波</option>
                <option value="温州">温州</option>
                <option value="金华">金华</option>
                <option value="台州">台州</option>
            </select><br>
        <br>选择的课外课程：
        <input type="checkbox" value="吉他" v-model="checkValue1">吉他
        <input type="checkbox" value="国画" v-model="checkValue1">国画
        <input type="checkbox" value="街舞" v-model="checkValue1">街舞
        <input type="checkbox" value="书法" v-model="checkValue1">书法<br>
        <br><button @click="check()">提交</button>
        <br><br><br>
        <h1>知识点2：v-model修饰符</h1>
        <h3>1.lazy修饰符</h3>
        <h3>1.lazy修饰符.v-model在每次input事件出发后将输入框的数据与变量同步
            添加lazy修饰符后，改成与change事件同步
        </h3>
        <input type="text" v--model.lazy="text">{{text}}
        <h3>2.number修饰符。如果用户想自动将输入的值转换为数值型，可以加.number修饰符</h3>
        <input type="text" v-model.number="num">
        {{num+1}}
        <h3>3.trim修饰符 如果想要自动过滤前后的空白字符，可以加trim修饰符</h3>
        <input type="text" v-model.trim="text"> 
        {{text+"你好！"}}
    </div>


</body>
</html>

<script>
    const connApp=Vue.createApp({
        data() {
            return {
                singleText:'',//初始化了变量，用来存放文本框的数据
                multiText:'',
                radioValue:'',
                toggleValue:false,
                checkValue:[],
                singleSelect:'',
                multiSelect:[],

                singleText1:'',
                singlePass1:'',
                singlePass2:'',
                radioValue1:'',
                singleSelect1:'',
                checkValue1:[],

                text:'',
                num:'',
                
            }
            
        },
        methods: {
            check(){
                alert("尊敬的"+this.singleSelect1+this.radioValue1+this.singleText1+",您选择的课外课程是:"+this.checkValue1);
            }
        },
    }).mount("#app")
</script>